<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>腕带费用调整-后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/plugin/layui/css/layui.css}">
    <script type="text/javascript" th:src="@{/plugin/layui/layui.js}"></script>
    <script th:src="@{/plugin/vue/axios.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugin/vue/vue.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugin/echarts.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/plugin/jquery.min.js}" charset="utf-8"></script>


</head>
<body>
<!--<table class="layui-table"-->
<!--       lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:10, url:'/adjustMoneyInfo/listAll'}">-->
<!--    <thead>-->
<!--    <tr>-->
<!--        <th lay-data="{field:'adjustId', width:100,align: 'center'}">序号</th>-->
<!--        <th lay-data="{field:'organization.organization_name', width:100,align: 'center'}">所属机构</th>-->
<!--        <th lay-data="{field:'adjustMoney', width:100, sort: true}">调整费用</th>-->
<!--        <th lay-data="{field:'adjustReason', minWidth: 150,align: 'center'}">调整原因</th>-->
<!--        <th lay-data="{field:'user.account', sort: true, align: 'center'}">调整人</th>-->
<!--        <th lay-data="{field:'statusInfo.statusAttr', sort: true, minWidth: 100, align: 'center'}">调整状态</th>-->
<!--    </tr>-->
<!--    </thead>-->
<!--</table>-->
<div class="layui-container" id="all">
    <div style="margin-top: 20px;">
        <button id="insert-btn" class="layui-btn" >新增</button>
    </div>

    <div>
        <table id="app" lay-filter="test"></table>
    </div>

    <div id="updateForm" style="display: none">
        <form class="layui-form" id="update-form"  lay-filter="update-form">
            <!-- 调整人（隐藏） -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input style="width: 200px" type="hidden" id="adjustId" name="adjustId" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 调整人（隐藏） -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input style="width: 200px" type="hidden" id="adjuster" name="adjuster" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 调整金额 -->
            <div class="layui-form-item">
                <label class="layui-form-label">调整金额</label>
                <div class="layui-input-block">
                    <input style="width: 200px" type="text" id="adjustMoney" name="adjustMoney" required  lay-verify="required" placeholder="请输入金额" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 调整原因 -->
            <div class="layui-form-item">
                <label class="layui-form-label">调整原因</label>
                <div class="layui-input-block">
                    <input style="width: 200px" type="text" id="adjustReason" name="adjustReason" required  lay-verify="required" placeholder="请输入原因" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--是否启用-->
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block" style="width: 200px">
                    <select id="adjustStatus" name="adjustStatus" lay-verify="required">
<!--                        <option value=""></option>-->
<!--                        <option value="1">启用</option>-->
<!--                        <option value="2">禁用</option>-->
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="update-form-submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <div id="insertForm" style="display: none">
        <form class="layui-form" id="insert-form" style="margin-top: 10px"  lay-filter="insert-form">
<!--            &lt;!&ndash; 调整人（隐藏） &ndash;&gt;-->
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-input-block">-->
<!--                    <input style="width: 200px" type="hidden" id="adjustIdAdd" name="adjustId" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 调整人（隐藏） &ndash;&gt;-->
<!--            <div class="layui-form-item">-->
<!--                <div class="layui-input-block">-->
<!--                    <input style="width: 200px" type="hidden" id="adjusterAdd" name="adjuster" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
            <!-- 调整金额 -->
            <div class="layui-form-item">
                <label class="layui-form-label">调整金额</label>
                <div class="layui-input-block">
                    <input style="width: 200px" type="text" id="adjustMoneyAdd" name="adjustMoney" required  lay-verify="required" placeholder="请输入金额" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 调整原因 -->
            <div class="layui-form-item">
                <label class="layui-form-label">调整原因</label>
                <div class="layui-input-block">
                    <input style="width: 200px" type="text" id="adjustReasonAdd" name="adjustReason" required  lay-verify="required" placeholder="请输入原因" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--是否启用-->
            <div class="layui-form-item">
                <label class="layui-form-label">选择框</label>
                <div class="layui-input-block" style="width: 200px">
                    <select id="adjustStatusAdd" name="adjustStatus" lay-verify="required">
<!--                        <option value=""></option>-->
<!--                        <option value="1">启用</option>-->
<!--                        <option value="2">禁用</option>-->
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="insert-form-submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>

<script type="text/html" id="toolbar">
    <button class="layui-btn layui-btn-xs" lay-event="update">更新</button>
    <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</button>
</script>
<script>
    layui.use(['table','layer','form'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        // 获取表格数据
        table.render({
            elem:"#app",
            url:"[[@{/adjustMoneyInfo/listAll}]]",
            method:"get",
            page:true,
            cols:[
                [
                    {field:"adjustId",title:"ID",width:100,sort:true,align:'center'},
                    {field:"adjustMoney",title:"调整费用",width:100,align:'center'},
                    {field:"adjustReason",title:"调整原因",width:100,align:'center'},
                    {field:"adjustTime",title:"调整时间",width:100,align:'center'},
                    {templet:function(data){
                        return data.user.account;
                    },title:"调整人",width:100,align:'center'},
                    {templet:function(data){
                        return data.organization.organization_name;
                    },title:"所属组织",width:100,align:'center'},
                    {templet:function(data){
                        return data.statusInfo.statusAttr;
                    },title:"调整状态",width:100,align:'center'},
                    {toolbar:"#toolbar",title:"处理"}
                ]
            ],
            id:"test"
        });
        // 某行删除
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            //var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'delete'){ // 删除操作
                layer.confirm('确定删除该行数据？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    const params = new FormData();
                    params.append("adjustId",data.adjustId);
                    axios.post("[[@{/adjustMoneyInfo/delete}]]",params)
                        .then(resp=>{
                            if(resp.code===1){
                                layer.msg(data.msg);
                                table.reload('app');
                            }else{
                                layer.msg(data.msg);
                            }
                        });
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'update'){ //编辑
                //do something
                axios.get("[[@{/adjustMoneyInfo/listOption}]]")
                    .then(r=>{
                        var list = r.data.data;
                        var select = document.getElementById('adjustStatus');
                        if (list != null || list.size() > 0) {
                            for (var c in list) {
                                var option = document.createElement("option");
                                option.setAttribute("value", list[c].statusId);
                                option.innerText = list[c].statusAttr;
                                select.appendChild(option)
                            }
                        };
                        form.render('select');
                    });
                form.val('update-form',{
                    "adjustId":data.adjustId,
                    "adjustMoney":data.adjustMoney,
                    "adjustReason":data.adjustReason,
                    "adjuster":data.adjuster,
                    "adjustStatus":data.adjustStatus,
                });
                layer.open({
                    type:1,
                    title:'更新操作',
                    area:['400px','500px'],
                    content: $('#updateForm')
                });
                form.on('submit(update-form-submit)',function (data) {
                    const d = new FormData();
                    d.append("adjustId",$('#adjustId').val());
                    d.append("adjustMoney",$('#adjustMoney').val());
                    d.append("adjustReason",$('#adjustReason').val());
                    d.append("adjuster",$('#adjuster').val());
                    d.append("adjustStatus",$('#adjustStatus').val());
                    axios.post("[[@{/adjustMoneyInfo/update}]]",d)
                        .then(res=>{
                            if(res.code === 1){
                                layer.close(layer.index);
                                layer.msg(data.msg);
                                table.reload('app');
                            }
                        });
                    table.reload('app');
                })
                //同步更新缓存对应的值
                // obj.update({
                //     username: '123',
                //     title: 'xxx'
                // });
            };
        });

        $("#insert-btn").click(function () {

            // 为select添加option标签
            axios.get("[[@{/adjustMoneyInfo/listOption}]]")
                .then(r=>{
                    var list = r.data.data;
                    var select = document.getElementById('adjustStatusAdd');
                    if (list != null || list.size() > 0) {
                        for (var c in list) {
                            var option = document.createElement("option");
                            option.setAttribute("value", list[c].statusId);
                            option.innerText = list[c].statusAttr;
                            select.appendChild(option)
                        }
                    };
                    form.render('select');
                });
            // 打开弹框
            layer.open({
                type:1,
                title:'新增操作',
                area:['400px','500px'],
                content: $('#insertForm')
            });
        });

        // 表单操作
        form.on('submit(insert-form-submit)',function (data) {
            const d = new FormData();
            d.append("adjustMoney", $('#adjustMoneyAdd').val());
            d.append("adjustReason", $('#adjustReasonAdd').val());
            d.append("adjuster", 1);
            d.append("adjustStatus", $('#adjustStatusAdd').val());
            d.append("adjustOrganization", 1);
            axios.post("[[@{/adjustMoneyInfo/insert}]]", d)
                .then(res => {
                    if (res.code === 1) {
                        layer.close(layer.index);
                        layer.msg(data.msg);
                        table.reload('app');
                    }
                });
            table.reload('app');
        })

    });

</script>
</body>
</html>